<template>
  <div class="monitoringDynamics">
    <PageTitle :goBack="false" title="监控动态" :border="false" />
    <div class="myCardCss" style="width: 100%">
      <a-form class="myForm1" :model="formData" :label-col="6" :wrapper-col="12">
        <a-form-item label="关键字" style="margin-left: 12px">
          <a-input
            style="width: 450px; border-radius: 4px"
            placeholder="请输入监控对象名称"
            v-model:value="formData.companyName"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="更新时间" style="margin-left: 12px">
          <a-radio-group name="radioGroup" v-model:value="formData.time">
            <a-radio :value="1">今天</a-radio>
            <a-radio :value="2">近三天</a-radio>
            <a-radio :value="3">近一周</a-radio>
            <a-radio :value="4">近半月</a-radio>
            <a-radio :value="5">近一个月</a-radio>
            <a-radio :value="0">自定义日期</a-radio>
          </a-radio-group>
          <a-range-picker
            v-if="formData.time === 0"
            v-model:value="formData.times"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="风险类型" style="margin-left: 12px">
          <a-checkbox
            v-model:checked="checkAll"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
          >
            全部
          </a-checkbox>
          <a-checkbox
            v-model:checked="checkAll1"
            :indeterminate="indeterminate1"
            @change="onCheckAllChange1"
          >
            工商风险
          </a-checkbox>
          <a-checkbox
            v-model:checked="checkAll2"
            :indeterminate="indeterminate2"
            @change="onCheckAllChange2"
          >
            司法风险
          </a-checkbox>
        </a-form-item>
        <a-form-item label="风险维度" style="margin-left: 12px" v-if="checkAll1">
          <a-checkbox-group v-model:value="formData.riskDimensions1" @change="setData(1)">
            <a-checkbox
              :value="item.dimensionName"
              name="type1"
              v-for="(item, index) in list1"
              :key="index"
              >{{ item.dimensionName }}</a-checkbox
            >
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="风险维度" style="margin-left: 12px" v-if="checkAll2">
          <a-checkbox-group v-model:value="formData.riskDimensions2" @change="setData(2)">
            <a-checkbox
              :value="item.dimensionName"
              name="type2"
              v-for="(item, index) in list2"
              :key="index"
              >{{ item.dimensionName }}</a-checkbox
            >
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="风险级别" style="margin-left: 12px">
          <a-checkbox @change="changeAny1" :value="any1" :checked="checked1" name="type"
            ><span style="width: 28px; display: block">不限</span></a-checkbox
          >
          <a-checkbox-group
            @change="changeOther1"
            v-model:value="formData.riskLevels"
            :options="options1"
          />
          <!-- <a-checkbox-group v-model:value="formData.riskLevels" @change="setData(4)">
            <a-checkbox value="不限" name="type">不限</a-checkbox>
            <a-checkbox value="提示" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">提示</a-checkbox>
            <a-checkbox value="正向" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">正向</a-checkbox>
            <a-checkbox value="低风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">低风险</a-checkbox>
            <a-checkbox value="中风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">中风险</a-checkbox>
            <a-checkbox value="高风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">高风险</a-checkbox>
          </a-checkbox-group> -->
        </a-form-item>
        <a-button
          type="primary"
          danger
          style="margin-left: 96px; border-radius: 4px"
          @click="searchData"
          >查询</a-button
        >
        <a-button @click="resetData" style="margin-left: 12px; border-radius: 4px">重置</a-button>
      </a-form>
    </div>
    <div style="width: 100%; margin-top: 8px" class="sticky">
      <a-table :dataSource="dataSource" :columns="columns" :pagination="false" :scroll="{ y: 650 }">
        <template #index="{ index }">
          {{ index + 1 }}
        </template>
        <template #details="{ record }">
          <div class="myContent">
            <div v-for="(value, key) of JSON.parse(record.details)">
              <div
                ><label v-if="key !== '内容'">{{ key }}: </label> {{ value }}</div
              >
            </div>
          </div>
        </template>
        <template #operation="{ record }">
          <a
            class="xqBtn"
            :class="!showGotoDetail(record) ? 'active' : ''"
            @click="openDetails(record)"
            >详情</a
          >
        </template>
      </a-table>
      <div class="otherPagination">
        <div class="seizeASeat"> </div>
        <a-pagination
          size="small"
          :total="pageForm.total"
          :pageSize="pageForm.size"
          :current="pageForm.limit"
          :hideOnSinglePage="true"
          :showSizeChanger="false"
          @change="changePage"
          class="pag"
        />
      </div>
    </div>
  </div>
  <monitoringDetail
    v-if="state.detailVisible"
    :visible="state.detailVisible"
    :detail="state.detailObject"
    @close="closeDetailDialog"
  />
</template>
<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import { getOptions, getRiskRecord } from '/@/api/monitoringCenter';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import monitoringDetail from './detail.vue';

  import { SearchOutlined } from '@ant-design/icons-vue';
  import { getTimes, setTimes } from '/@/utils';
  let checked1 = ref(false);
  let any1 = ref('');
  let options1 = ref(['提示', '正向', '低风险', '中风险', '高风险']);
  const changeAny1 = () => {
    checked1.value = !checked1.value;
    formData.value.riskLevels = [];
  };
  const changeOther1 = () => {
    checked1.value = false;
  };
  const state: {
    detailVisible: boolean;
    detailObject: any;
  } = reactive({
    detailVisible: false,
    detailObject: null,
  });

  let formData = ref({
    companyName: '',
    parentDimension: [], // 风险类型
    dimensions: [], // 所有风险维度
    riskLevels: [], // 风险级别
    time: -1,
    times: [],
    riskType: [],
    riskType1: [],
    riskType2: [],
    riskDimensions1: [],
    riskDimensions2: [],
    riskDimensions: [],
  });
  let pageForm = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getList();
  }
  async function getList() {
    let riskDimensions = formData.value.riskDimensions1.concat(formData.value.riskDimensions2);
    let riskLevels = formData.value.riskLevels.filter((item) => item === '不限').length
      ? ''
      : formData.value.riskLevels.toString();
    let startTime = '';
    let endTime = '';
    if (formData.value.time === 0 && formData.value.times && formData.value.times.length === 2) {
      // 自定义日期
      startTime = formData.value.times[0];
      endTime = formData.value.times[1];
    } else {
      startTime = getTimes(formData.value.time)[0];
      endTime = getTimes(formData.value.time)[1];
    }
    let queryData = {
      limit: pageForm.value.limit,
      size: pageForm.value.size,
      companyName: formData.value.companyName,
      riskLevels,
      dimensions: riskDimensions.toString(),
      startTime,
      endTime,
    };
    let res = await getRiskRecord(queryData);
    let needCurrentPage = res.currentPage;
    dataSource.value = res.list.map((item, index) => {
      item.createTime = setTimes(Number(item.createTime));
      return {
        ...item,
        index: needCurrentPage * 10 - 10 + index + 1,
      };
    });
    pageForm.value.total = res.total;
  }
  function searchData() {
    pageForm.value.limit = 1;
    getList();
  }
  function resetData() {
    checked1.value = false;
    checkAll.value = false;
    checkAll1.value = false;
    checkAll2.value = false;
    indeterminate.value = false;
    indeterminate1.value = false;
    indeterminate2.value = false;
    pageForm.value.limit = 1;
    formData.value = {
      companyName: '',
      parentDimension: [], // 风险类型
      dimensions: [], // 所有风险维度
      dimensions1: [], // 风险维度1
      dimensions2: [], // 风险维度2
      riskLevels: [], // 风险级别
      time: -1,
      times: [],
      riskType: [],
      riskType1: [],
      riskType2: [],
      riskDimensions1: [],
      riskDimensions2: [],
      riskDimensions: [],
    };
    getList();
  }
  let dataSource = ref([]);
  let columns = ref([
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      key: 'index',
      // slots: { customRender: 'index' },
    },
    {
      title: '监控对象',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
    },
    {
      title: '风险级别',
      dataIndex: 'riskLevel',
      key: 'riskLevel',
      align: 'left',
    },
    {
      title: '监控类型',
      dataIndex: 'dimensionName',
      key: 'dimensionName',
      align: 'left',
    },
    {
      title: '动态内容',
      dataIndex: 'details',
      key: 'details',
      width: '500px',
      align: 'left',
      slots: { customRender: 'details' },
    },
    {
      title: '更新时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'left',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'center',
    },
  ]);
  function openDetails(detailObject) {
    state.detailObject = detailObject;
    openDetailDialog();
  }
  getList();

  const showGotoDetail = (record) => {
    return [
      '新增开庭公告',
      '新增法院公告',
      '新增裁判文书',
      '新增经营异常',
      '新增失信被执行人',
      '新增股权冻结',
    ].includes(record.dimensionName);
  };

  const openDetailDialog = () => {
    state.detailVisible = true;
  };
  const closeDetailDialog = () => {
    state.detailVisible = false;
  };
  let optionsList = ref([]);
  let list1 = ref([]);
  let list2 = ref([]);
  // 监控动态下拉
  async function getSeletOpition() {
    const res = await getOptions();
    optionsList.value = res;
    list1.value = res[0].children;
    list2.value = res[1].children;
  }
  getSeletOpition();

  let checkAll = ref(false);
  let indeterminate = ref(false);
  let checkAll1 = ref(false);
  let indeterminate1 = ref(false);
  let checkAll2 = ref(false);
  let indeterminate2 = ref(false);
  const onCheckAllChange = (e: any) => {
    if (e.target.checked) {
      checkAll.value = true;
      indeterminate.value = false;
      checkAll1.value = true;
      indeterminate1.value = false;
      checkAll2.value = true;
      indeterminate2.value = false;
      formData.value.riskDimensions1 = list1.value.map((item) => item.dimensionName);
      formData.value.riskDimensions2 = list2.value.map((item) => item.dimensionName);
    } else {
      checkAll.value = false;
      indeterminate.value = false;
      checkAll1.value = false;
      indeterminate1.value = false;
      checkAll2.value = false;
      indeterminate2.value = false;
      formData.value.riskDimensions1 = [];
      formData.value.riskDimensions2 = [];
    }
  };
  const onCheckAllChange1 = (e: any) => {
    if (e.target.checked) {
      formData.value.riskDimensions1 = list1.value.map((item) => item.dimensionName);
      checkAll1.value = true;
      indeterminate1.value = false;
      if (checkAll2.value) {
        checkAll.value = true;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    } else {
      formData.value.riskDimensions1 = [];
      checkAll1.value = false;
      indeterminate1.value = false;
      if (!checkAll2.value) {
        checkAll.value = false;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  };
  const onCheckAllChange2 = (e: any) => {
    if (e.target.checked) {
      formData.value.riskDimensions2 = list2.value.map((item) => item.dimensionName);
      checkAll2.value = true;
      indeterminate2.value = false;
      if (checkAll1.value) {
        checkAll.value = true;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    } else {
      formData.value.riskDimensions2 = [];
      checkAll2.value = false;
      indeterminate2.value = false;
      if (!checkAll1.value) {
        checkAll.value = false;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  };

  function setData(type: number) {
    if (type === 1) {
      if (formData.value.riskDimensions1.length === 0) {
        checkAll1.value = false;
        indeterminate1.value = false;
        if (!checkAll2.value) {
          checkAll.value = false;
          indeterminate.value = false;
        }
        return;
      }
      if (formData.value.riskDimensions1.length === list1.value.length) {
        checkAll1.value = true;
        indeterminate1.value = false;
        if (formData.value.riskDimensions2.length === list2.value.length) {
          checkAll.value = true;
          indeterminate.value = false;
        }
      } else {
        checkAll1.value = true;
        indeterminate1.value = true;
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
    if (type === 2) {
      if (formData.value.riskDimensions2.length === 0) {
        checkAll2.value = false;
        indeterminate2.value = false;
        if (!checkAll1.value) {
          checkAll.value = false;
          indeterminate.value = false;
        }
        return;
      }
      if (formData.value.riskDimensions2.length === list2.value.length) {
        checkAll2.value = true;
        indeterminate2.value = false;
        if (formData.value.riskDimensions1.length === list1.value.length) {
          checkAll.value = true;
          indeterminate.value = false;
        }
      } else {
        checkAll2.value = true;
        indeterminate2.value = true;
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  }
</script>
<style lang="less" scoped>
  .mySearchButton {
    // margin-left: 102px;
    margin-right: 12px;
  }
  .myContent {
    padding: 0 20px 0 0;
    width: 100%;
    font-size: 14px;
    color: #303133;
    text-align: left;
  }
  .myCardCssOther {
    padding: 24px 0 24px 0;
    background: #ffffff;
    width: 100%;
  }
  .ant-form label {
    margin-left: 8px !important;
  }
  .xqBtn {
    color: #1473dc;
  }
  .xqBtn.active {
    color: #d8d8d8;
    pointer-events: none;
  }
  .otherPagination {
    float: right !important;
    width: 100%;
    height: 32px;
    background-color: #fff !important;
    display: flex;
    flex-direction: row-reverse;
  }
</style>
